<template>
    <header id="header">
        <nav class="container clearfix">
            <!-- logo开始 -->
            <a href="javascript:;" class="logo">
                <img src="/khoroshoblogs/image/logo1.png" alt="logo">
            </a>

            <!-- 导航开始 -->
            <div id="nav">
                <ul class="nav-body clearfix">
                    <li>
                        <a href="javascript:;" class="parent-nav">首页</a>
                    </li>

                    <li>
                        <a href="javascript:;" class="parent-nav">任务大厅</a>
                    </li>

                    <li>
                        <a href="javascript:;" class="parent-nav child-act">直接雇佣</a>

                        <!-- 二级菜单 -->
                        <div class="child-nav">
                            <div class="one-nav clearfix">
                                <a href="javascript:;" class="one-nav-com">企业法务</a>
                                <a href="javascript:;" class="one-nav-com">企业财务</a>
                                <a href="javascript:;" class="one-nav-com">互联网+</a>
                                <a href="javascript:;" class="one-nav-com">投融资</a>
                                <a href="javascript:;" class="one-nav-com">二级导航</a>
                            </div>

                            <!-- 三级菜单 -->
                            <div class="two-nav clearfix">
                                <div class="two-nav-lay">
                                    <a href="javascript:;" class="two-nav-com">查看所有业务</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                </div>

                                <div class="two-nav-lay">
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                </div>

                                <div class="two-nav-lay">
                                    <a href="javascript:;" class="two-nav-com">三级导航导航</a>
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                </div>

                                <div class="two-nav-lay">
                                    <a href="javascript:;" class="two-nav-com">三级导航</a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 搜索框 -->
            <div id="search">
                <div class="search-body">
                    <i class="search-icon"></i>
                    <input type="text" class="search" placeholder="搜索">
                </div>
            </div>

            <!-- 登录按钮等 -->
            <div id="button">
                <a href="javascript:;" class="hd-btn release-btn">发布任务</a>
                <a href="javascript:;" class="hd-btn login-btn">登陆/注册</a>
            </div>
        </nav>
    </header>
</template>

<script>
    //    var childNavHover = document.getElementsByClassName('child-act')[0];
    //    var childNav = document.getElementsByClassName('child-nav')[0];
    //    childNavHover.onmouseover = function(){
    //        childNav.style.opacity = "1";
    //        childNav.style.visibility = "visible";
    //        childNav.style.top = "90px";
    //    };
    //
    //    childNavHover.onmouseout = function(){
    //        childNav.style.top = "120px";
    //        childNav.style.opacity = "0";
    //        childNav.style.visibility = "hidden";
    //    };
    //
    //    childNav.onmouseover = function(){
    //        childNav.style.opacity = "1";
    //        childNav.style.visibility = "visible";
    //        childNav.style.top = "90px";
    //    };
    //
    //    childNav.onmouseout = function(){
    //        childNav.style.top = "120px";
    //        childNav.style.opacity = "0";
    //        childNav.style.visibility = "hidden";
    //    };

    /**
     * 搜索框点击显示隐藏
     */
    var searchBtn = document.getElementsByClassName('search-btn')[0];
    var search = document.getElementsByClassName('search')[0];

    // 阻止冒泡
    function stopPropagation(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }

    // 点击显示隐藏
    document.getElementsByClassName("search-icon")[0].addEventListener("click", function (e) {
        stopPropagation(e);
        var sw = search.style.width;
        if (sw != "220px") {
            search.focus();
            search.style.width = "220px";
            search.style.padding = "2px 10px 2px 32px";
        } else {
            search.style.width = "0px";
            search.style.padding = "0";
        }
    });

    // 点击输入框不隐藏
    document.getElementsByClassName("search")[0].addEventListener("click", function (e) {
        stopPropagation(e);
        search.style.width = "220px";
        search.style.padding = "2px 10px 2px 32px";
    });

    // 点击其他地方消失
    document.getElementsByTagName("body")[0].addEventListener("click", function () {
        search.style.width = "0px";
        search.style.padding = "0";
    });
</script>
